/**
* 题库列表
**/ 

<template>
  <div>
    <el-container>
      <el-header>
        <!-- <g-row class="demoRow" align="left" gutter="20"> -->
         
             <!-- 面包屑 -->
            <div style="border: 2px" >
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">题库管理&nbsp;</el-breadcrumb-item>
                <el-breadcrumb-item>题库列表</el-breadcrumb-item>
              </el-breadcrumb>
              <h3>题库列表</h3>
            </div>
            
<!--     </g-row> -->
        
            
       
      </el-header>
      <el-container>
        <el-aside width="200px">
          
          <!-- 树状图分支块 -->
          <div                                                                                                                                                                                                  >
            <el-input placeholder="输入关键字进行过滤" v-model="filterText">
            </el-input>

            <el-tree
              class="filter-tree"
              :data="data"
              :props="defaultProps"
              default-expand-all
              :filter-node-method="filterNode"
              ref="tree"
              @node-click="find"
            >
            </el-tree>
          </div>
        </el-aside>
        <el-main>          
            <div style="margin-top: 20px">
                <el-button @click="dialogFormVisible = true" type="danger">新增科目</el-button>
                <el-button @click="toggleSelection()">取消选择 </el-button>
                <!-- <el-button @click="toggleSelection(tableData)">全选</el-button> -->
                <el-button @click="(dialogVisible2 = true),handleDeleteSelectedData(multipleSelection)">批量删除</el-button>
            </div>


          <!-- 题库科目列表 -->
          <div>
             <hr />
            <div>
              &nbsp;已选：&nbsp;{{ multipleSelection.length }} &nbsp;&nbsp; 项
            </div>
            <hr />
            <!-- 批量删除确认弹框 -->
            <div>
              <el-dialog
                title="提示"
                :visible.sync="dialogVisible2"
                width="30%"
                :before-close="handleClose" >
                <span>确认批量删除？</span>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible2 = false">取 消</el-button>
                  <el-button type="primary" @click="(dialogVisible2 = false), handleDeleteSelected(multipleSelection)">确 定</el-button>
                </span>
              </el-dialog>
            </div>

            <!-- 新增题库提示框 -->
           
            <el-dialog title="基本信息" :visible.sync="dialogFormVisible">
              <el-form :model="addSubjectForm">
                <el-form-item
                  label="科目名称"
                  prop="name"
                  :label-width="formLabelWidth"
                  :rules="[
                    { required: true, message: '科目名称不能为空' },
                    { type: 'string', message: '科目名称必须为文本' } ]">
                  <el-input type="name" v-model="addSubjectForm.name" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button
                  type="primary"
                  @click="
                    handleAddSubject(addSubjectForm.name),
                      (dialogFormVisible = false)
                  "
                  >确 定</el-button
                >
              </div>
            </el-dialog>

            <!-- 题库列表表单 -->
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column label="编号" prop="id" width="120">
                <template slot-scope="scope">{{ scope.row.id }}</template>
              </el-table-column>
              <el-table-column label="科目" prop="subject" width="120">
                <template slot-scope="scope">{{ scope.row.subject }}</template>
              </el-table-column>
              <el-table-column label="创建者" prop="user" width="120">
                <template slot-scope="scope">{{
                  scope.row.user.username
                }}</template>
              </el-table-column>
              <el-table-column
                prop="addTime"
                label="创建时间"
                show-overflow-tooltip
              >
                <template slot-scope="scope">{{
                  scope.row.addTime | dateFormat
                }}</template>
              </el-table-column>
              <el-table-column
                prop="updateTime"
                label="更新时间"
                show-overflow-tooltip
              >
                <template slot-scope="scope">{{
                  scope.row.updateTime | dateFormat
                }}</template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="(centerDialogVisible = true), resetCopy(scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click="(dialogVisible = true), handleDeleteData(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <!-- 修改弹框 -->
            <el-dialog
              title="修改"
              :visible.sync="centerDialogVisible"
              width="30%"
              center
            >
              <span>
                <el-form
                  :model="subjectValidateForm"
                  ref="subjectValidateForm"
                  label-width="100px"
                  class="demo-ruleForm"
                >
                  <el-form-item
                    label="科目名称"
                    prop="subject"
                    :rules="[
                      { required: true, message: '科目名称不能为空' },
                      { type: 'string', message: '科目名称必须为文本' },
                    ]"
                  >
                    <el-input
                      type="subject"
                      v-model="subjectValidateForm.subject"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-form>
              </span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false"
                  >取 消</el-button
                >
                <el-button
                  type="primary"
                  @click="
                    (centerDialogVisible = false),
                      submitForm(subjectValidateForm.subject)
                  "
                  >提 交</el-button
                >
                <el-button
                  type="primary"
                  @click="
                    (centerDialogVisible = false),
                      addNextGrade(subjectValidateForm.subject)
                  "
                  >添加下一级</el-button
                >
              </span>
            </el-dialog>

            <!-- 删除确认弹框 -->
            <div>
              <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose"
              >
                <span>确认删除？</span>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button
                    type="primary"
                    @click="
                      (dialogVisible = false), handleDelete(deleteRowData)
                    "
                    >确 定</el-button
                  >
                </span>
              </el-dialog>
            </div>
            <el-footer>
              <!-- 分页版块 -->
              <div class="block">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  @prev-click="handlePrevClick"
                  :current-page="currentPage"
                  :page-sizes="pageSizes"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalNums"
                >
                </el-pagination>
              </div>
            </el-footer>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script type="text/ecmascript-6">
// 导入组件

//导入接口
import {
  questionInventoryList,
  updateOne,
  deleteOne,
  addOne,
  iList,
  findById
} from "../../api/questionInventoryMG";

// import headerComponent from "./head.vue";
// 导出模块
export default {
  // 模块名字
  name: "questionInventoryList",
  // 模块数据
  data() {
    //数据
    return {
      //树状图数据
      filterText: "",
      data: [],
      defaultProps: {
        children: "questionInventories",
        label: "subject",
      },

      tableData: [],
      //题库列表副本
      tableData2: [],
      multipleSelection: [],
      level: "",

      //分页版块的数据
      //默认初始页面
      currentPage: 1,
      //数据总条数
      totalNums: 400,
      //默认每页显示条数
      pageSize: 10,
      //每页显示条数数组
      pageSizes: [10, 20, 30, 40],

      //修改弹出框
      centerDialogVisible: false,

      //添加弹出框
      dialogFormVisible: false,

      //删除弹出框。。。。
      dialogVisible: false,
      dialogVisible2: false,

      //添加弹出框数据
      addSubjectForm: {
        name: ""
    

      },
      formLabelWidth: "120px",
      newSubjectObject: {
        id: null,
        subject: "",
        user: null,
        addTime: "",
        updateTime: "",
        fid:0
      },

      //修改行的数据
      rowData: null,
      deleteRowData: null,
      deleteRowSelectedData: null,
      //表格行对象副本
      rowData2: null,

      //修改科目表单的对象内容
      subjectValidateForm: {
        subject: "",
      },
      //定义局部刷新变量,局部刷新标识（刷新指定区域）
      isReloadData: true,
    };
  },
  // 注册组件
  components: {
    // headerComponent
  },
  // 监听指定值，只有指定值变化，才会触发
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    addFun() {},
    submitFun() {},

    //树状图数据方法
    filterNode(value, data) {
      if (!value) return true;
      return data.subject.indexOf(value) !== -1;
    },
    find(data) {
      // console.log(data)
      //给新增科目弹出框的新增对象的fid赋值
      this.newSubjectObject.fid=data.id;
      // console.log(data);
      // console.log(data.id);
      console.log(data)
    
    
      if (data.questionInventories.length==0) {
        this.totalNums=1
        this.tableData=[]
        this.tableData.push(data)

      } else {
        this.tableData = data.questionInventories;
       this.totalNums=data.questionInventories.length;
      }
     
      // this.reloadPart(data.id)
      // location.reload()
    },


  
    //局部刷新方法
    reloadPart(id) {
      // this.isReloadData=false
      // this.$nextTick(()=>{
      //   this.isReloadData=true
      // })
    },

    //弹出框方法。。。
    handleClose(done) {
      this.$confirm("确认删除？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    //修改行的数据的重新赋值
    resetCopy(row) {
      this.rowData = row;
    },
    //修改删除数据的重新赋值
    handleDeleteData(row) {
      this.deleteRowData = row;
    },
    //修改批量删除数据的重新赋值
    handleDeleteSelectedData(multipleSelection) {
      this.deleteRowSelectedData = multipleSelection;
    },
    //修改页面内容重置
    submitForm(parameter) {
      this.rowData2 = Object.assign({}, this.rowData);
      this.rowData2.subject = parameter;
      //调用api接口获取修改题库表单数据
      updateOne(this.rowData2)
        .then((res) => {
          if (res.data.code == 200) {
            this.$message("修改成功！");
            questionInventoryList()
              .then((res) => {
                (this.totalNums = res.data.data.list.length),
                  (this.tableData = res.data.data.list);
 
              })
              .catch();
            iList()
              .then((res) => {
                this.data = res.data.data;
                // console.log(this.data)
              })
              .catch();
          } else {
            this.$message("修改失败！");
          }

          this.subjectValidateForm.subject = "";
        })
        .catch();
      //  this.rowData
    },

    //添加科目下一级方法
     addNextGrade(params){
      // this.rowData2 = Object.assign({}, this.rowData);
      // this.rowData2.subject = parameter;
      // this.rowData2.fid =

     },

    //添加科目弹出框确认提交方法
    handleAddSubject(params) {
      this.newSubjectObject.subject = params
      this.newSubjectObject.user = JSON.parse(
          localStorage.getItem("userdata")
        ).data
      let newSubjectObject2 = Object.assign({},this.newSubjectObject)
      if (params == "" || params == null) {
        this.$message("添加失败，科目名称不能为空！");
      } else {
        addOne(newSubjectObject2)
          .then((res) => {
            console.log(res, "添加科目成功");
          })
          .catch(),
        this.$message("添加科目成功！"),
        (this.addSubjectForm.name = ""),
        this.newSubjectObject.fid = 0
        location.reload();
      }
    },

    //分页版块的自带方法
    handleSizeChange(val) {
      this.pageSize=val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handlePrevClick(val){
      this.currentPage=this.currentPage+1
    },

    handleDelete(params) {
      //调用api接口获取删除题库表单数据
      deleteOne(params)
        .then((res) => {
          console.log(res, "删除成功"),
            this.$message("删除成功！"),
            location.reload();
        })
        .catch();
    },

    //批量删除
    handleDeleteSelected(rows) {
      if (rows.length > 0) {
        rows.forEach((row) => {
          deleteOne(row)
            .then((res) => {
              console.log(res);
            })
            .catch();
        });
        console.log("批量删除成功"),
          this.$message("批量删除成功！"),
          location.reload();
      } else {
        this.$message("没有被选中的题库");
      }
    },

    getSubjectMenu() {
      //调用api接口获取题库科目表单数据
      questionInventoryList()
        .then((res) => {
          console.log(res),
            (this.totalNums = res.data.data.list.length),
            (this.tableData = res.data.data.list);
        })
        .catch();
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          if (row) this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // handleEdit(index, row) {
    //     console.log(index, row);
    // },
    // handleDelete(index, row) {
    //     console.log(index, row);
    // },
    // 创建前状态(里面是操作)
  },
  beforeCreate() {},
  //初初始化
  created() {

    //调用api接口获取题库科目表单数据
    questionInventoryList()
      .then((res) => {
        (this.totalNums = res.data.data.list.length),
          (this.tableData = res.data.data.list);
        // console.log(res.data.data.list)
      })
      .catch(),
      //树状图查找所有题库分类和下面的子节点
      iList()
        .then((res) => {
          this.data = res.data.data;
          // console.log(this.data)
        })
        .catch();
  },
  // 挂载前状态(里面是操作)
  beforeMount() {},
  // 挂载结束状态(里面是操作)
  mounted() {},
  // 更新前状态(里面是操作)
  beforeUpdate() {},
  // 更新完成状态(里面是操作)
  updated() {},
  // 销毁前状态(里面是操作)
  beforeDestroy() {},
  // 销毁完成状态(里面是操作)
  destroyed() {},
};
</script>
// scoped 样式只在本组件使用
<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.list-search {
  margin-top: 20px;
}
</style>
